---
name: Value
menu: 1. State Containers
---

import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
import { Value } from '../../dist/react-powerplug.esm'

# Value

A generic component for storing raw data values.

## Usage

```js
import { Value } from 'react-powerplug'
```

```jsx
<Value initial="React">
  {({ value, set, reset }) => (
    <>
      <Select
        label="Choose one"
        options={['React', 'Preact', 'Vue']}
        value={value}
        onChange={set}
      />
      <Button onClick={reset}>Reset to initial</Button>
    </>
  )}
</Value>
```

```jsx
<Value initial="first">
  {({ value, set }) => {
    const bindRadio = radioValue => ({
      selected: value === radioValue,
      onClick: () => set(radioValue),
    })

    return (
      <form>
        <RadioCheck {...bindRadio('first')}>First radio</RadioCheck>
        <RadioCheck {...bindRadio('second')}>Second radio</RadioCheck>
        <div>Selected value: {value}</div>
      </form>
    )
  }}
</Value>
```

## Props

<Props>
  <Prop name="initial" type="any">
    Specifies the initial `value` state.
  </Prop>
  <Prop name="onChange" type="function">
    The onChange event of the Value is called whenever the on state changes.
  </Prop>
  <Prop name="children" type="function">
    Receive state as function. It can also be `render` prop.
  </Prop>
</Props>

## Children Props

<ChildrenProps>
  <ChildrenProp name="value" type="any">
    Your `value` state value
  </ChildrenProp>
  <ChildrenProp name="set" type="function">
    Arbitrary set a value to `value` state
  </ChildrenProp>
  <ChildrenProp name="reset" type="function">
    Reset `value` to initial state
  </ChildrenProp>
</ChildrenProps>
